<template>
    <div>
        <!-- 发班记录查询 -->
        <div class="container">
            <!-- 表单 -->
            <el-form :inline="true" :model="formList" class="ticketForm" id="recordEnquiry">
                <el-form-item label="发班单号">
                    <el-input size="mini" v-model="formList.billno" class="inp"></el-input>
                </el-form-item>
                <el-form-item label="班次时间起">
                    <el-date-picker type="date" size="mini" class="minipt"
                                    v-model="formList.startDate" value-format="yyyy-MM-dd"></el-date-picker>
                    至
                    <el-date-picker type="date" size="mini" class="minipt" v-model="formList.endDate"
                                    value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="路线">
                    <el-autocomplete v-model="formList.roadname" size="mini" class="inp"
                                     :fetch-suggestions="querySearchendroads">
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="班次号">
                    <el-input size="mini" v-model="formList.busid" class="inp"></el-input>
                </el-form-item>
                <el-form-item label="车牌号">
                    <el-autocomplete v-model="formList.carno" size="mini" class="inp"
                                     :fetch-suggestions="querySearchCarNum">
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="打单员">
                    <el-autocomplete v-model="formList.username" size="mini" class="inp"
                                     :fetch-suggestions="querySearchUser">
                        <template slot-scope="{ item }">
                            <div>[{{ item.code }}] {{ item.value }}</div>
                        </template>
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="运营单位">
                    <el-autocomplete v-model="formList.ccustom" size="mini" class="inp"
                                     :fetch-suggestions="querySearchComp">
                        <template slot-scope="{ item }">
                            <div>[{{ item.code }}] {{ item.value }}</div>
                        </template>
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="单据状态">
                    <el-select size="mini" v-model="formList.billstaus">
                        <el-option value="" label="不限">不限</el-option>
                        <el-option value="0" label="正常">正常</el-option>
                        <el-option value="1" label="作废">作废</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结算类型">
                    <el-select size="mini" v-model="formList.jiesuanleixing">
                        <el-option value="" label="不限">不限</el-option>
                        <el-option value="月结" label="月结">月结</el-option>
                        <el-option value="即结" label="即结">即结</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="已结算">
                    <el-select size="mini" v-model="formList.isyijiesuan">
                        <el-option value="" label="不限">不限</el-option>
                        <el-option value="1" label="是">是</el-option>
                        <el-option value="0" label="否">否</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="补打">
                    <el-select size="mini" v-model="formList.isbuda">
                        <el-option value="" label="不限">不限</el-option>
                        <el-option value="1" label="是">是</el-option>
                        <el-option value="0" label="否">否</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="加班">
                    <el-select size="mini" v-model="formList.isot">
                        <el-option value="" label="不限">不限</el-option>
                        <el-option value="1" label="是">是</el-option>
                        <el-option value="0" label="否">否</el-option>
                    </el-select>
                </el-form-item>
                <button class="check-btn rf" type="button" @click="check">
                    <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                </button>
            </el-form>
            <!-- 表格栏 -->
            <el-row>
                <el-col :span="24">
                    <avue-crud :data="banTable[0].data" :option="banTable[0].option" :page="this.banTable[0].page"
                               @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               @row-dblclick="handleRowDBLClick">
                        <template slot-scope="scope" slot="create_userno">
                            [{{scope.row.create_userno}}]{{scope.row.create_username}}
                        </template>
                        <template slot-scope="scope" slot="del_flag">
                            {{scope.row.del_flag==true?'是':''}}
                        </template>
                        <template slot-scope="scope" slot="is_balance_sum">
                            {{scope.row.is_balance_sum==true?'是':''}}
                        </template>
                        <template slot-scope="scope" slot="people_count">
                            {{scope.row.people_count==0?'0':scope.row.people_count}}
                        </template>
                        <template slot-scope="scope" slot="enfant_count">
                            {{scope.row.enfant_count==0?'0':scope.row.enfant_count}}
                        </template>
                        <template slot-scope="scope" slot="ticket_price_sum">
                            {{scope.row.ticket_price_sum==0?'0':scope.row.ticket_price_sum}}
                        </template>
                        <template slot-scope="scope" slot="ticket_station_surcharges_sum">
                            {{scope.row.ticket_station_surcharges_sum==0?'0':scope.row.ticket_station_surcharges_sum}}
                        </template>
                        <template slot-scope="scope" slot="balance_fee">
                            {{scope.row.balance_fee==0?'0':scope.row.balance_fee}}
                        </template>
                        <template slot-scope="scope" slot="people_kilo">
                            {{scope.row.people_kilo==0?'0':scope.row.people_kilo}}
                        </template>
                    </avue-crud>
                </el-col>
            </el-row>
        </div>

        <!--遮罩层-->
        <div class='popContainer' v-show="modelShow"></div>
        <!--车票弹窗-->
        <div class="management-modal-win" v-show="modelShow">
            <!-- 标题 -->
            <el-row>
                <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">{{modalTitle}}</div>
                    <div class="rf close" @click="closeModual()">X</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="msg-win">
                        <el-table height="340px" :data="data_list" fit="false">
                            <!--<el-table-column type="index" width="50px"></el-table-column>-->
                            <el-table-column prop='tk_no' label="票号" width="110px"></el-table-column>
                            <el-table-column prop="stname" label="站点名" width="150%"></el-table-column>
                            <el-table-column prop="seat_idx" label="座位号" width="65px"></el-table-column>
                            <el-table-column prop="tk_type_name" label="票型" width="100px"></el-table-column>
                            <el-table-column prop='tk_price' label="票价" width="100px"></el-table-column>
                            <el-table-column label="是否携童" width="80px">
                                <template slot-scope="scope">
                                    {{scope.row.is_enfant==true?'是':'否'}}
                                </template>
                                >
                            </el-table-column>
                            <el-table-column prop="tk_check_name" label="检票员" width="105px"></el-table-column>
                            <el-table-column prop="tk_check_time" label="检票时间" width="180px"></el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script>
    import "../../assets/js/jquery.js";
    import qs from "qs";

    export default {
        data() {
            return {
                modelShow: false,
                modalTitle: "",
                data_list: [],
                getIndex: "",
                banTable: [
                    {
                        page: {
                            pageSizes: [10, 50, 100, 200],
                            total: '',
                            currentPage: 1,
                            pageSize: 50,
                        },
                        data: [],
                        option: {
                            defaultSort: {
                                prop: 'bus_date',
                                order: 'descending'
                            },
                            page: true,
                            sumText: '合计',
                            border: true,
                            menu: false,
                            columnBtn: true,
                            index: true,
                            showSummary: true,
                            highlightCurrentRow: true,
                            height: 586,
                            align: 'center',
                            menuAlign: "center",
                            column: [],
                        }
                    }
                ],

                controllernumb: "",

                formList: {
                    billno: "",
                    startDate: "",
                    endDate: "",
                    roadname: "",
                    busid: "",
                    carno: "",
                    username: "",
                    ccustom: "",
                    billstaus: "",
                    jiesuanleixing: "",
                    isyijiesuan: "",
                    isbuda: "",
                    isot: "",
                },
                tableData: [],
                roadlist: [],
                compList: [],
                carNumList: [],
                userslist: [],
                ccustomid: "",
                roadsid: "",
                usernameid: "",
            };
        },
        methods: {
            //下拉提示框回调
            createFilter(queryString) {
                return arr => {
                    return arr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
                };
            },
            //线路自动补全
            querySearchendroads(queryString, cb) {
                var arr = this.roadlist;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //线路请求
            loadRoads() {
                var arr = [];
                this.$http
                    .post("/sch/data/line/listWithSpell")
                    .then(data => {
                        for (var e of data.data) {
                            arr.push({value: e.name, prop: e.id});
                        }
                        console.log(arr);
                    });
                return arr;
            },
            //营运单位自动补全
            querySearchComp(queryString, cb) {
                var arr = this.compList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //营运单位请求
            loadComp() {
                var arr = [];
                this.$http
                    .post("/sch/data/bus_company/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.name, prop: c.id, code: c.code});
                        }
                        console.log(arr);
                    });
                return arr;
            },
            // 车牌自动补全
            querySearchCarNum(queryString, cb) {
                var arr = this.carNumList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //车牌请求
            loadCarNum() {
                var arr = [];
                this.$http
                    .post("/sch/data/bus_vehicle/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.vehi_no});
                        }
                    });
                return arr;
            },
            // 打单员自动补全
            querySearchUser(queryString, cb) {
                var arr = this.userslist;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //打单员请求
            loadUser() {
                var arr = [];
                this.$http
                    .post("/sys/user/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.name, prop: c.id, code: c.no});
                        }
                    });
                return arr;
            },
            //关闭弹窗
            closeModual() {
                this.modelShow = false;
            },
            //获取列表
            getroadselllist() {
                this.$http
                    .post(
                        "/query/bill/detail/list",
                        qs.stringify({
                            filterRules: '[{"field":"bill.bus_date","op":"dge","value":"' + this.nowtoday + '"},' +
                                '{"field":"bill.bus_date","op":"dle","value":"' + this.nowtoday + '"}]',
                            page: this.banTable[0].page.currentPage,
                            rows: this.banTable[0].page.pageSize,
                        })
                    )
                    .then(data => {
                        console.log(data.data);
                        this.banTable[0].page.total = data.data.totalRow;
                        this.banTable[0].page.currentPage = data.data.pageNumber;
                        this.banTable[0].page.pageSize = data.data.pageSize;
                        this.banTable[0].data = data.data.list;

                    })
            },

            //查询
            check() {
                this.controllernumb = 1;
                this.$http
                    .post(
                        "/query/bill/detail/list",
                        qs.stringify({
                            filterRules: '[{"field":"bill.no","op":"eq","value":"' + this.formList.billno + '"}' +
                                ',{"field":"bill.bus_date","op":"dge","value":"' + this.formList.startDate + '"},' +
                                '{"field":"bill.bus_date","op":"dle","value":"' + this.formList.endDate + '"},' +
                                '{"field":"bill.line_id","op":"eq","value":"' + this.roadsid + '"},' +
                                '{"field":"bill.bus_id","op":"eq","value":"' + this.formList.busid + '"},' +
                                '{"field":"bill.vehino","op":"eq","value":"' + this.formList.carno + '"},' +
                                '{"field":"bill.customer_id","op":"eq","value":"' + this.ccustomid + '"},' +
                                '{"field":"bill.del_flag","op":"eq","value":"' + this.formList.billstaus + '"},' +
                                '{"field":"bill.balance_type","op":"eq","value":"' + this.formList.jiesuanleixing + '"},' +
                                '{"field":"bill.is_bu","op":"eq","value":"' + this.formList.isbuda + '"},' +
                                '{"field":"bill.is_ot","op":"eq","value":"' + this.formList.isot + '"},' +
                                '{"field":"bill.is_balance_sum","op":"eq","value":"' + this.formList.isyijiesuan + '"},' +
                                '{"field":"bill.create_user","op":"eq","value":"' + this.usernameid + '"}]',
                            page: this.banTable[0].page.currentPage,
                            rows: this.banTable[0].page.pageSize,
                        })
                    )
                    .then(data => {
                        console.log(data.data);
                        this.banTable[0].page.total = data.data.totalRow;
                        this.banTable[0].page.currentPage = data.data.pageNumber;
                        this.banTable[0].page.pageSize = data.data.pageSize;
                        this.banTable[0].data = data.data.list;
                    });
            },
            //时间处理,获取当天时间
            todayfunction() {
                let now = new Date();
                var nowday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
                this.nowtoday = nowday;
                this.formList.startDate = nowday;
                this.formList.endDate = nowday;
            },
            //pageSize变化事件
            handleSizeChange(val) {
                console.log(val);
                this.banTable[0].page.pageSize = val;
                if (this.controllernumb == 1) {
                    this.check();
                } else {
                    this.getroadselllist();
                }
            },
            //pageNum变化事件
            handleCurrentChange(val) {
                console.log(val);
                this.banTable[0].page.currentPage = val;
                if (this.controllernumb == 1) {
                    this.check();
                } else {
                    this.getroadselllist();
                }
            },
            //双击行，显示弹窗
            handleRowDBLClick(row) {
                this.getIndex = row.index;
                //判断单号是否作废
                if (row.del_flag == true) {
                    this.$notify({
                        showClose: true,
                        message: '该单号已作废',
                        type: 'info',
                        position: 'top-left',

                    });
                } else {
                    this.modelShow = true;
                    this.modalTitle = "检票明细";
                    this.$http
                        .post(
                            "/query/bill/detail/seatPage",
                            qs.stringify({
                                bus_bill_id: row.id,
                            })
                        )
                        .then(data => {
                            this.data_list = data.data.list;
                        })
                }
            },
            //表头栏
            tableCreate() {
                this.banTable[0].option.column.push(
                    {
                        label: "线路",
                        prop: "line_name",
                        width: "120px"
                    },
                    {
                        label: "发班单号",
                        prop: "no",
                        width: "150%"
                    },
                    {
                        label: "已作废",
                        prop: "del_flag",
                        solt: true,
                    },
                    {
                        label: "班次号",
                        prop: "bus_id",
                        width: "100px"
                    },
                    {
                        label: "班次日期",
                        prop: "bus_date",
                        width: "110px",
                        sortable: true,
                    },
                    {
                        label: "结算类型",
                        prop: "balance_type",
                        width: "120px"
                    },
                    {
                        label: "总座数",
                        prop: "all_seat",
                        width: "65px"
                    },
                    {
                        label: "乘车人数",
                        prop: "people_count",
                        width: "80px",
                        solt: true,
                    },
                    {
                        label: "免票儿童",
                        prop: "enfant_count",
                        width: "90px",
                        solt: true,
                    },
                    {
                        label: "总票款",
                        prop: "ticket_price_sum",
                        width: "80px",
                        solt: true,
                    },
                    {
                        label: "附加费合计",
                        prop: "ticket_station_surcharges_sum",
                        width: "100px",
                        solt: true,
                    },
                    {
                        label: "扣费合计",
                        prop: "balance_fee",
                        width: "90px",
                        solt: true,
                    },
                    {
                        label: "人公里数",
                        prop: "people_kilo",
                        width: "100px",
                        solt: true
                    },
                    {
                        label: "已结算",
                        prop: "is_balance_sum",
                        width: "70px",
                        solt: true
                    },
                    {
                        label: "车牌号",
                        prop: "vehino",
                        width: "100px"
                    },
                    {
                        label: "当班驾驶员",
                        prop: "drivers",
                        width: "100px"
                    },
                    {
                        label: "营运单位",
                        prop: "customer_name",
                        width: "100px"
                    },
                    {
                        label: "打单员",
                        prop: "create_userno",
                        width: "150%",
                        solt: true
                    },
                    {
                        label: "打印时间",
                        prop: "create_time",
                        width: "160px"
                    },
                );
            }

        },
        watch: {
            //侦听线路名，获取其id
            "formList.roadname": {
                handler(curVal, oldVal) {
                    console.log(curVal, oldVal);
                    if (this.formList.roadname == "") {
                        this.roadsid = "";
                    } else {
                        for (var item of this.roadlist) {
                            if (this.formList.roadname == item.value) {
                                this.roadsid = item.prop;
                                break;
                            } else {
                                this.roadsid = "";
                            }
                        }
                        console.log(this.roadsid)
                    }
                },
                deep: true
            },
            //侦听营运单位，并转换id
            "formList.ccustom": {
                handler(curVal, oldVal) {
                    console.log(curVal, oldVal);
                    if (this.formList.ccustom == "") {
                        this.ccustomid = "";
                    } else {
                        for (var item of this.compList) {
                            if (this.formList.ccustom == item.value) {
                                this.ccustomid = item.prop;
                                break;
                            } else {
                                this.ccustomid = "";
                            }
                        }
                        console.log(this.ccustomid)
                    }
                },
                deep: true
            },
            //侦听打单员，并转换id
            "formList.username": {
                handler(curVal, oldVal) {
                    console.log(curVal, oldVal);
                    if (this.formList.username == "") {
                        this.usernameid = "";
                    } else {
                        for (var item of this.userslist) {
                            if (this.formList.username == item.value) {
                                this.usernameid = item.prop;
                                break;
                            } else {
                                this.usernameid = "";
                            }
                        }
                        console.log(this.usernameid)
                    }
                },
                deep: true
            },
        },
        mounted() {
            this.todayfunction();
            this.compList = this.loadComp();
            this.carNumList = this.loadCarNum();
            this.roadlist = this.loadRoads();
            this.userslist = this.loadUser();
            this.tableCreate();
            this.getroadselllist();

        },

    }
</script>
<style scoped src="../../assets/css/check/recordEnquiry.css">
    .el-date-editor.el-input {
        width: 150px !important;
    }

    .check_btn, .check_btn:hover {
        background: #009688;
        border-radius: 5px;
        border: 0px;
        color: white;
        cursor: pointer;
        padding: 10px 20px;
    }

    .form_btn {
        float: right;
        margin-right: 40px;
    }
</style>

